{% load static %}

<style>
    .comment-item {
        width: auto;
        height: auto;
        margin-top: 30px;
        border: 0px solid green;
    }

    .comment-item > .header {
        width: 48px;
        height: 48px;
        margin-top:0px;
        float: left;
    }

    .username {
        color: grey;
        float: left;
        margin-left: 20px;
    }

    .date {
        color: grey;
        float: right;
    }

    .content {
        clear: both;
        width: auto;
        height: auto;
        margin-left: 64px;
    }
    .reply{
        clear: both;
        height: auto;
        float: right;
        color: grey;
        font-size: 12px;
        text-decoration: underline;
    }

    .reply > div{
        float: right;
        margin-left: 40px;
    }

    .reply > div:hover{
        color: red;
        cursor: pointer;
    }
</style>

<script src="/static/ckeditor/ckeditor/ckeditor.js"></script>
<script src="/static/ckeditor/ckeditor/adapters/jquery.js"></script>

<script>
    var reply_input = new Array();
    function click_reply_btn(input_id, isLogin) {
        if (!isLogin){
            alert("登录后才能评论或者回复评论哟~")
            return;
        }

        var reply_div_id = "input-area-div-" + input_id;
        var reply_input_id = "input-area-" + input_id;

        if ($("#" + reply_div_id).css("display") !== "none"){
            $("#" + reply_div_id).css("display", "none")
            return
        }

        if (reply_input[input_id] !== undefined){
            $("#" + reply_div_id).css("display", "");
            return;
        }
        else {
            CKEDITOR.replace(reply_input_id,
                {
                    'width': 'auto',
                    'height': 150,
                    dialog_backgroundCoverOpacity: 0.5,
                    resize_enabled: false,
                    extraPlugins: 'codesnippet',
                    codeSnippet_theme: 'zenburn',
                    toolbar:
                        [
                            ['Source'],
                            ['Bold',],
                            ['Image'],
                            ['Format', 'Font', 'FontSize', 'TextColor', 'BGColor', 'Smiley', 'Indent'],
                            ['CodeSnippet']
                        ]
                });
        }

        reply_input[input_id] = 1;
        $("#" + reply_div_id).css("display", "");
    }

    function create_comment_item(comment, isReply, userId) {
        var content_id = "content-" + comment.id;
        var reply_div_id = "input-area-div-" + comment.id;
        var reply_input_id = "input-area-" + comment.id;
        var displayStatus = "";
        var current_url = window.location.href;

        if (isReply) {
            displayStatus = "none";
        }

        var html = '' +
            '<div class="comment-item">' +
                '<img class="header" src="/static/images/user_02.jpg"/>' +
                '<div>' +
                    '<div style="padding-top: 0px">' +
                        '<div class="username"><a style="color: red; margin-right: 10px">' + comment.user_name + '</a>[' + comment.address + '网友]</div>' +
                        '<div class="date">'+ comment.create_time + '</div>' +
                    '</div>' +
                        '<div class="content" id=' + content_id + '>' +
                            comment.content +
                        '</div>' +
                        '<div class="reply" style="display:' + displayStatus + '">' +
                            '<div id="ding-' + comment.id + '" onclick="comment_ding(this.id)">顶(' + comment.ding + ')</div>' +
                            '<div id="cai-' + comment.id + '" onclick="comment_cai(this.id)">踩(' + comment.cai + ')</div>' +
                            '<div id=' + comment.id + ' onclick="click_reply_btn(this.id, ' + userId + ')">回复</div>' +
                        '</div>' +
                        '<div id=' + reply_div_id + ' style="display:none; padding-top:40px;">' +
                            '<form action="/comment/reply" method="POST" enctype="multipart/form-data">' +
                                '{% csrf_token %}' +
                                '<textarea name="content" id=' + reply_input_id + '></textarea>' +
                                '<input type="submit" style="width:80px; height:30px; margin-top: 10px;" value="回复"/>' +
                                '<input name="parent" type="text" value="' + comment.id + '" style="float:right; visibility: hidden">' +
                                '<input name="title" type="text" value="{{ article.title }}" style="float:right; visibility: hidden">' +
                                '<input name="current_url" type="text" value="' + current_url + '" style="float:right; visibility: hidden">' +
                            '</form>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<div style="clear: both;border-bottom: 1px dashed grey; padding-top: 10px; display:' + displayStatus + '"></div>' +
            '</div>';

        return html;
    }

    function list_comments(title, user_id) {
        $.ajax({
            type:'POST',
            data:{'title': title, "parent": -1, csrfmiddlewaretoken:'{{ csrf_token }}'},
            url:'{% url 'comment:list' %}',
            datatype: JSON,
            success: function (data) {
                if (data.comment.length < 1){
                    $("#comment-list").append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;还没有评论哟，快来评论盖楼呀~");
                    return true;
                }
                $("#comment-list").append("<span>评论列表</span>");
                for (var i = 0; i < data.comment.length; i++) {
                    $("#comment-list").append(create_comment_item(data.comment[i], false, user_id));
                    list_reply_tree(data.comment[i]);
                }
            },
            error:function () {
                console.log('ajax刷新分页数据失败！');
            }
        });
    }

    function list_reply_tree(comment, user_id) {
        var content_id = "content-" + comment.id;
        $.ajax({
            type:'POST',
            data:{'title': "{{ article.title }}", "parent": comment.id, csrfmiddlewaretoken:'{{ csrf_token }}'},
            url:'{% url 'comment:list' %}',
            datatype: JSON,
            success:function (data) {
                if (data.comment.length > 0){
                    for (var i = 0; i < data.comment.length; i++) {
                        $("#" + content_id).append(create_comment_item(data.comment[i], true, user_id));
                        list_reply_tree(data.comment[i]);
                    }
                }
            },
            error:function () {
                console.log('ajax刷新分页数据失败！');
            }
        });
    }

</script>
<div id="comment-list" style="clear: both; margin-top: 30px; margin-left: 30px; margin-right: 30px">
</div>
